<template>
  <div class="">
    <h2>计算属性</h2>

    <button @click="list[1].num++">num++</button>
    <button @click="sum">计算总价</button>

    <h2>{{ result }}</h2>
    <h3>{{ com1 | filnums }}</h3>

    <h3><button @click="msg = 'vuevuevue'">改变msg</button></h3>
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: "电脑", price: 5000, num: 2 },
        { title: "nars大白饼", price: 380, num: 2 },
        { title: "雅诗兰黛", price: 2700, num: 1 },
      ],
      msg: "hello world",
      result: 0,
    };
  },

  methods: {
    sum() {
      this.list.forEach((item) => {
        this.result += Number(item.price) * Number(item.num);
      });
    },
  },
  computed: {
    com1() {
      let num1 = 0;
      this.list.forEach((item) => {
        num1 += item.price * item.num;
      });
      return num1;
    },
  },
  //计算属性长得是函数的样子，用的时候跟data的用法一样,必须要有一个return值 代表了计算的结果 计算属性会自动计算 跟这个计算属性有关的值发生改变的时候会自动重新计算 如果跟他无关的值发生改变就不会重新计算 而是从缓存中拿上一次计算的结果
};
</script>

<style lang="scss"></style>
